<template>
    <view class="back">
    	<!-- 课程状态 待训练 进行中 已完成  -->
    	<view style="width: 100vw;height: 50vh;margin-top: 30rpx;border-radius: 70rpx 70rpx 0rpx 0rpx;padding-bottom:5vh ;font-size: 30rpx;">
    		<view style="border-radius: 25rpx 25rpx 25rpx 25rpx;margin: 0 auto;width: 95%;height: 60px;background-color: #6EE7F0;position: relative;">
    			<view class="dao" style="font-size: 40rpx;" v-for="(item,index) in list">
    				<!-- 当前选择的状态 -->
    				<view class="dao-1" v-if="selectStatus==index+1">
    					<text>{{item.name}}</text>
						<view class="xian"></view>
    				</view>
    				<!-- 所有课程状态 -->
    				<view class="dao-2" v-else @click="changeSelect(item)">
    					<text>{{item.name}}</text>
    				</view>
    			</view>
				<text style="display: block;background-color: #fff;width:1px;height: 48px;position: absolute;top: 12rpx;left: 203px;"></text>
    		</view>
    		<view style="height: auto;width: 100%;padding-bottom: 50rpx;">
    			<view @tap="openReservation(item)" style="overflow: hidden;height: auto;border-radius: 15rpx;width: 95%;background-color: #fff;margin: 0 auto;margin-top: 30rpx ;padding: 12rpx 22rpx ;box-sizing: border-box;box-shadow: 0 2px 10px #dfdfdf;margin-bottom: 18px;" v-for="item in courseList">
    				<view style="height: 50rpx;">
    					<view style="float: left;margin-left: -7rpx;"><image src="../../static/日历.png" style="width: 20px;height: 20px;position: relative;top: 3px;left: 2px;margin-right: 8px;"/></view>
    					<view style="float: left;">{{item.fitnessPlanName}}</view>
    				</view>
					<!--标签-->
					<view style="overflow: hidden;">
						<view style="width: 100%;" v-for="item in item.listDate" :key="item">
							<view style="float: left;margin:0rpx 10rpx 13rpx 0rpx;background-color:rgb(237, 237, 237);border-radius: 10rpx;padding: 10rpx;">{{item.fitnessActionName}}</view>
						</view>
					</view>
					<view style="height: 50rpx;margin-left: 1px;position: relative;">
						<view style="width: 60rpx;height: 60rpx;float: left;">
							<image class="imagg" :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.memberUserPhoto"></image>
						</view>
						<view style="height: 60rpx;line-height: 30px;">
							<view style="float: left;margin-left: 20rpx;color: #333;">{{item.memberUserRealName}}</view>
						</view>
						<view style="height: 50rpx; display: flex; justify-content: flex-end;width: 200px;position: absolute;right: -2px;bottom: -1px;">
						  <view style="width: 180rpx;" v-if="item.reservationStatus==0" @click.stop="openReservationpages(item)">
						    <view style="color:#fff;height: 50rpx; border-radius: 10rpx; background-color: #6EE7F0; display: flex; align-items: center; justify-content: center;">
						      <text style="letter-spacing: 4px;" >&nbsp;预约</text>
						    </view>
						  </view>
						  <view style="width: 180rpx;" v-if="item.reservationStatus==1" >
						    <view style="color:#fff;height: 50rpx; border-radius: 10rpx; background-color: #C0C4CC; display: flex; align-items: center; justify-content: center;">
						      <text style="letter-spacing: 4px;" >&nbsp;已预约</text>
						    </view>
						  </view>
						</view> 
					</view>
    			</view>
				
			</view>
    	</view>
    </view>
</template>

<script>
import NavigationBar from '@/components/NameNavigationBarTo.vue'; // 请根据你的实际路径进行调整

export default {
  components: {
    NavigationBar,
  },
  data(){
	return {
		courseList: [
		],
		form:{},
		list: [
			{
				isClick:1,
				name: '待训练'
			},
			{
				isClick:2,
				name: '已训练'
			}],
			current: 0,
			selectStatus:1,
			dayOfMonth: 0,
			daySelect: 0,
			venuename : uni.getStorageSync('venuename'),
			today: ''
	}
  },
  onLoad(option) {
		this.form=JSON.parse(option.item)
		
  },
  onShow() {
  	this.getReservation()
  },
  methods: {
	  handleLeftClick() {
	    uni.navigateBack();
	  },
	  goBack() {
		uni.navigateBack()  
	  },
	  getReservation(){
		var isComplete=0
		if(this.selectStatus==1){
			isComplete=1
		}
		if(this.selectStatus==2){
			isComplete=0
		}
	  	var ths = this;
	  	uni.request({
	  		url: this.URL+'vipPlan/selectAction',
	  		method: 'GET',
	  		data: {
	  			memberId: ths.form.id,
				isComplete:isComplete,
				coachCode:uni.getStorageSync("teacherinfo").coachCode
	  		},
	  		// userInfo:res.
	  		success: function(res) {
				if(res.data.code==200){
					ths.courseList = res.data.data;
				}else{
					ths.courseList =[]
				}
	  			
	  		},
	  		fail: function(error) {
	  			// 处理请求失败
	  			console.error('角色查询失败,请检查网络');
	  		}
	  	})
	  },

	  openReservation(item){
		  if(item.reservationStatus==0) {
			  console.log(111111);
		  	uni.navigateTo({
		  		url: '/pages/train/inProgressReservation?item='+JSON.stringify(item)
		  	})
		  }
		  if(item.reservationStatus==1){
			  console.log(222222);
		  	uni.navigateTo({
		  		url: '/pages/train/inProgress?item='+JSON.stringify(item)
		  		
		  	})
		  }
	  },
	  openReservationpages(item){
		  item.schedule = this.form.schedule
		  uni.navigateTo({
		  	url: '/pages/Reservation/ReservationSetting?item='+JSON.stringify(item)
		  })
	  },
	  goSearch() {	
	  	
	  },
	  changeSelect(item){
	  	this.selectStatus=item.isClick
	  	this.getReservation()
	  },
	  change(index) {
	  	this.current = index;
	  },
  },
};
</script>
<style>
	.week-item-d1{
		background-color: #6EE7F0;;
		width: 23px;height:23px;
		margin: 0 auto;
		border:#92A3FD;
		border-radius: 50%;
		margin-top: 1vh;
		font-size: 28rpx;
		padding-top: 2px;
		box-sizing: border-box;
		padding-right: 3rpx;
	}
	.div2{
		width: 100%;
		height: 5vh;
	}
	.div2-2{
		background-color:#fff;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
/* ::v-deep .div2-2 .input-placeholder {
    color: #FFF;
} */
.week-display {
	display: flex;
	justify-content: space-between;
	color: #fff;
	width: 90%;
	height: 8vh;
	margin: 0 auto;
	margin-top: 2vh;
}

.week-item {
	flex: 1;
	text-align: center;
}

.back {
	position: relative;
	width: 100%;
	height: 100vh; /* 超出部分隐藏，可根据需求调整 */
}

.back::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #EDF5F7;
	z-index: -1;
}
.homeclick{
	height: 70rpx;
	width: 70rpx;
	margin-top: 20rpx;
}


.dao{
	 float: left;
	 width: 50%;
	 margin: 0 auto;
	 margin-top: 20rpx;
	 height: 45rpx;
	 font-size: 25rpx;
}
.dao-1{
	position: relative;
	width: 100%;
	margin: 0 auto;
	height: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}
.dao-2{
	width: 100%;
	margin: 0 auto;
	height: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.imagg{
	 width: 50rpx;
	 height: 50rpx;
	 border-radius: 50%; 
}
.xian{
	width: 82rpx;
	height: 10rpx;
	background-color: #fff;
	border-radius: 20%;
	position: absolute;
	bottom: -20rpx;
	left: 140rpx;
}
</style>